<!DOCTYPE html>
<html>

<head>
    <title>层级选择器</title>
    <link rel="stylesheet" href="../../css/style.css" />

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

    <script>
        $(function(){
            $("#btn1").click(function(){
                // alert("修改one的颜色");
                $("body div:first").css("background-color","red");
            });

            $("#btn2").click(function(){
                // alert("修改one的颜色");
                $("body div:last").css("background-color","red");
            });

            $("#btn3").click(function(){
                // alert("修改one的颜色");
                $("body div:odd").css("background-color","red");
            });

            $("#btn4").click(function(){
                // alert("修改one的颜色");
                $("body div:even").css("background-color","red");
            });

        });

    </script>

</head>

<body>
    <input type="button" id="btn1" value="body中的第一个div元素" />
    <input type="button" id="btn2" value="body中的最后一个div元素" />
    <input type="button" id="btn3" value="选择body中的奇数的div" />
    <input type="button" id="btn4" value="选择body中的偶数的div" />
   
    <hr />

    <div id="one">
        <div class="mini">111</div>
    </div>
    <div id="two">
        <div class="mini">222</div>
        <div class="mini">333</div>
    </div>
    <div id="three">
        <div class="mini">444</div>
        <div class="mini">555</div>
        <div class="mini">666</div>
    </div>
    <span id="four"></span>
</body>

</html>